<script setup lang="js">
import { ref, onBeforeMount, watch } from "vue";
import { getCatalogPage } from "@/http/api/catalogApi";
import { getProductPage } from "@/http/api/productApi";
import { useRoute } from "vue-router";
import PathBreadcrumb from "../components/PathBreadcrumb.vue";
import { Check, ShoppingTrolley } from "@element-plus/icons-vue";

const baseUrl = import.meta.env.VITE_APP_BASE_URL;

const catalogs = ref(null);
const products = ref(null);
const productTotal = ref(100);
const currentPage = ref(1);
const pageSize = ref(10);
const currentCatalog = ref(null);
const fetchCatalog = async () => {
  var params = {
    pageNum: 1,
    pageSize: 20,
    withPic: false,
    withProductCount: true,
  };
  getCatalogPage(params).then(value => {
    catalogs.value = value.data.records;
    console.log("分页请求目录成功", catalogs.value);
  }).catch(error => {
    console.log("分页请求目录失败", error);
  });
};

const fetchProduct = async () => {
  var params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    withPic: true,
    catalogId: currentCatalog.value,
  };
  getProductPage(params).then(value => {
    products.value = value.data.records;
    productTotal.value = value.data.total;
    console.log("分页请求产品成功", products.value);
  }).catch(error => {
    console.log("分页请求产品失败", error);
  });
};

const getImageUrl = (url) => {
  return baseUrl + url;
}

const getRouterUrl = (id) => {
  return "/product/" + id;
}

const handleCurrentChange = (val) => {
  console.log('Current page changed to:', val);
  currentPage.value = val;
  fetchProduct();
}

const handleCatalogChange = (id) => {
  console.log("current catalog id", id);
  currentCatalog.value = id;
  currentPage.value = 1;
  fetchProduct();
}

onBeforeMount(() => {
  fetchCatalog();
  fetchProduct();
});

const route = useRoute();

watch(
  () => route.query.id,
  (newId, oldId) => {
    // 对路由变化做出响应...
    console.log(newId, oldId);
  }
);
</script>
<template>
  <PathBreadcrumb></PathBreadcrumb>
  <h2 class="category-h">All products</h2>
  <div class="category-container">
    <div class="section-left">
      <h3 class="sort-h">Category</h3>
      <div class="category-current" @click="handleCatalogChange(null)">
        <span class="name">All products</span>
        <el-icon color="#15803d" size="24px" v-if="currentCatalog == null">
          <Check />
        </el-icon>
      </div>
      <div class="sub-list">
        <a
          class="item"
          v-for="(item, index) in catalogs"
          :key="index"
          @click="handleCatalogChange(item.id)"
        >
          <span class="name">{{ item.catalogName }}</span>
          <span class="num">({{ item.productCount }})</span>
          <el-icon
            color="#15803d"
            size="24px"
            v-if="currentCatalog == item.id"
            style="float: right"
          >
            <Check />
          </el-icon>
        </a>
        <!-- <a class="item">
          <span class="name">New</span>
          <span class="num">(24)</span>
        </a>
        <a class="item">
          <span class="name">New</span>
          <span class="num">(24)</span>
        </a> -->
      </div>
      <!-- <h3 class="sort-h">Sort by</h3>
      <div class="select-box">
        <el-select placeholder="Select" size="large">
          <el-option label="Last" value="1" />
          <el-option label="Last" value="2" />
          <el-option label="Last" value="3" />
        </el-select>
      </div> -->
    </div>
    <div class="section-right">
      <div class="product-num">2703 Products</div>
      <el-row class="product-list" :gutter="20">
        <el-col
          class="col-box"
          :span="6"
          v-for="(item, index) in products"
          :key="index"
        >
          <RouterLink class="product-item" :to="getRouterUrl(item.id)">
            <div class="product-img">
              <img
                :src="
                  getImageUrl(item.picPathList[0] ? item.picPathList[0] : '')
                "
                alt=""
              />
            </div>
            <div class="product-bottom">
              <p class="product-name">{{ item.productName }}</p>
              <div class="product-rate">
                <el-rate size="small" />
                <span class="rate-num">(12)</span>
              </div>
              <p class="product-price">$186.25</p>
              <div class="button">
                <el-button color="#15803d" :icon="ShoppingTrolley" @click.stop
                  >Add to cart</el-button
                >
              </div>
            </div>
          </RouterLink>
        </el-col>
      </el-row>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="productTotal"
          :current-page="currentPage"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.category-h {
  margin: 16px 0 40px;
  line-height: 40px;
  font-size: 36px;
  font-weight: 700;
}

.category-container {
  display: flex;

  .section-left {
    width: 30rem;

    .sort-h {
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 700;
      line-height: 20px;
      letter-spacing: 1px;
      background-color: #f4f4f5;
      border-radius: 6px;
      margin-bottom: 8px;
    }

    .category-current {
      height: 24px;
      padding: 6px 16px;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 500;
      background-color: #dcfce7;
      border-radius: 6px;

      .name {
        flex: 1;
      }
    }

    .sub-list {
      margin: 8px 0 24px;

      .item {
        display: block;
        padding: 8px 16px;
        font-size: 14px;
        line-height: 20px;
        border-radius: 6px;
        cursor: pointer;

        &:hover {
          background-color: #f4f4f5;
        }

        .num {
          padding-left: 6px;
          color: #71717a;
        }
      }
    }

    .select-box {
      padding: 16px 16px;
    }
  }

  .section-right {
    margin-left: 20px;
    flex: 1;

    .product-num {
      margin-bottom: 24px;
      font-size: 18px;
      font-weight: 500;
      line-height: 28px;
    }

    .col-box {
      box-sizing: border-box;
      margin-bottom: 20px;
    }

    .product-item {
      widows: 100%;
      height: 100%;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      display: flex;
      flex-direction: column;

      .product-img {
        height: 28.2rem;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          max-width: 100%;
          max-height: 100%;
          min-width: 100%;
          min-height: 100%;
          object-fit: contain;
        }
      }

      .product-bottom {
        flex: 1;
        padding: 16px;
        display: flex;
        flex-direction: column;

        .product-name {
          font-size: 16px;
          line-height: 24px;
        }

        .product-rate {
          display: flex;
          align-items: center;

          .rate-num {
            margin-left: 6px;
            font-size: 12px;
            color: #71717a;
          }
        }

        .product-price {
          font-size: 18px;
          font-weight: 700;
          line-height: 28px;
        }

        .button {
          padding-top: 8px;
          margin-top: auto;
        }
      }
    }

    .pagination {
      margin: 20px 0;
      padding: 16px 0;
      border-top: 1px solid #e5e7eb;
    }
  }
}
</style>
